<app-header [title]="'Welcome to Django Report Builder'"></app-header>
<mat-card>
  <mat-card-title>Reports</mat-card-title>

  <mat-form-field>
    <input matInput placeholder="Search Reports" (keyup)="applyFilter($event.currentTarget.value)">
  </mat-form-field>

  <mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
    <ng-container matColumnDef="actions">
      <mat-header-cell class="mat-header-cell" *matHeaderCellDef>
        <a href="/report/add" (click)="newReport($event)" mat-raised-button color="primary" [ngStyle]="{'text-transform': 'uppercase'}">
          <mat-icon>add</mat-icon>
          Add Report</a>
      </mat-header-cell>
      <mat-cell class="reports-row" *matCellDef="let report">
        <a mat-icon-button (click)="copyReport(report.id)" text-tr>
          <mat-icon aria-label="Copy report">content_copy</mat-icon>
        </a>
        <button mat-icon-button (click)="deleteReport(report)">
          <mat-icon aria-label="Delete report">delete</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell class="mat-header-cell" *matHeaderCellDef mat-sort-header>NAME</mat-header-cell>
      <mat-cell class="reports-row" *matCellDef="let report">
        <a href="/report/{{report.id}}" (click)="openReport($event, report.id)"> {{report.name}} </a>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="user">
      <mat-header-cell class="mat-header-cell" *matHeaderCellDef mat-sort-header>USER</mat-header-cell>
      <mat-cell class="reports-row" *matCellDef="let report"> {{report.user_created.first_name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="date">
      <mat-header-cell class="mat-header-cell" *matHeaderCellDef mat-sort-header>DATE</mat-header-cell>
      <mat-cell class="reports-row" *matCellDef="let report"> {{report.modified | date:'yyyy-MM-dd'}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <div class="example-no-results" [style.display]="dataSource?.filteredData.length == 0 ? '' : 'none'">
    No matches found.
  </div>
</mat-card>
